import React from 'react';
import './IntroductionPage.css'
import Head from './Head.js';
import Sidebar from './Sidebar.js';
import request from "../../utils/request";
import {  } from 'antd';
import { useState } from 'react';
import { UserOutlined, KeyOutlined, MoneyCollectOutlined } from '@ant-design/icons';
import axios from 'axios';

function IntroductionPage() {

    return (
        <div className='Side'>
            <Sidebar />
            <div className='Contain'>
                <h1>前言</h1>
                <p>这一段太长了自动能换行</p>
                <p>HTML的下一个元素直接换行</p>
                <button onClick={getUser}>得到用户信息</button>
            </div>
        </div>
    )
}

// 前后端交互 demo 前端部分，使用 axios 进行路由，在后端使用 flask 进行处理，这里发送方式默认使用 ‘POST’
function getUser() {
    var username = { 'username': 'admin' } // 传入的参数，使用 json 格式
    axios.post('/api/getUser', username).then(  // promise 的写法，第一个参数是路由地址，第二个参数是传入的 json
        res => {  // 成功的回调函数
            console.log(res.data)
        }
    ).catch(res => {  // 错误处理
        console.log(res.data.res)
    })
}

export default IntroductionPage